<template>
  <div class="login">
    <!-- 登录表单 -->
    <el-form class="form" :model="loginForm" :rules="rules" ref="loginRef">
      <h1 class="jianbianse">用 户 登 录</h1>
      <!-- 用户名输入框 -->
      <el-form-item prop="username">
        <el-input type="text" v-model="loginForm.username" prefix-icon="iconfont icon-username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <!-- 密码输入框 -->
      <el-form-item prop="password">
        <el-input type="password" v-model="loginForm.password" prefix-icon="iconfont icon-password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <!-- 验证码输入框 -->
      <el-form-item prop="code">
        <div style="display: inline-flex;justify-content: space-between;width: 100%;">
          <el-input type="text" v-model="loginForm.code" prefix-icon="iconfont icon-captcha" style="width: 170px;" placeholder="请输入验证码"></el-input>
          <!-- 验证码图片 -->
          <img :src="image" @click="getCode">
        </div>
      </el-form-item>
      <!-- 登录按钮 -->
      <el-form-item>
        <el-button class="button" type="primary" :loading="isLoading" @click="submitLogin('loginRef')">登  录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import './assets/css/login.css'
import store from "./store";
import routers from "./router/routers";
import {login, getVerifyCode} from "./api/login/login";
import {errorMsg} from "./utils/message";
export default {
  name: "login",
  data(){
    return {
      isLoading: false, // 登录按钮加载状态
      loginForm: {
        username: '', // 用户名
        password: '', // 密码
        code: '', // 验证码
        uuid: '' // 验证码唯一标识
      },
      image: '', // 验证码图片
      rules: {
        username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }], // 用户名验证规则
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }], // 密码验证规则
        code: [{ required: true, message: '验证码不能为空', trigger: 'blur' }], // 验证码验证规则
      }
    }
  },
  mounted() {
    // 页面加载时获取验证码
    this.getCode()
  },
  methods: {
    //  获取验证码
    getCode(){
      getVerifyCode().then(res => {
        this.image = res.img
        this.loginForm.uuid = res.uuid
      })
    },
    //  登录提交
    submitLogin(formName){
      this.$refs[formName].validate((valid) => {
        if (valid){
          this.isLoading = true
          login(this.loginForm).then(res => {
            if (res.success){
              //  缓存token
              store.dispatch('tokenAction', res.data.token)
              //  缓存刷新token
              store.dispatch('refreshAction', res.data.refreshToken)
              //  缓存当前登录用户信息
              store.dispatch('userInfoAction', res.data.userDto)
              //  切换到首页
              routers.push({path: '/Layout'})
            } else {
              //  获取新的验证码
              this.getCode()
              //  提示错误信息
              errorMsg(res.msg)
            }
            this.isLoading = false
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>